<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        th,td{
            width: 200px;
            height: 40px;
            border: 1px solid black;
        }
        .mtk{
            width: 200px;
            height: 200px;
            background-color: #ffc0cb;
            border: 3px solid red;
            padding-top: 20px;
            position: absolute;
            right: 500px;
            bottom: 150px;
            display: none;
        }
        input{
            margin-top: 20px;
        }
        .qd{
            margin-top: 20px;
        }
        .da{
            width: 600px;
            height: 500px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="da">
    <button onclick="tj()">添加</button>
    <table cellsponing="0">
        <thead>
            <tr>
                <th><input type="checkbox" onclick="qxx()" class="qx">全选</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
</div>
<div class="mtk">
    <h4>添加数据</h4>
    <input type="text" value="用户名" class="yhm" onfocus="f1()">
    <input type="text" value="年龄" class="nl" onfocus="f2()"><br>
    <button class="qd" onclick="add()">确定</button>
</div>
</body>
</html>
<script>
    var mtk=document.querySelector(".mtk")
    var yhm=document.querySelector(".yhm")
    var nl=document.querySelector(".nl")
    var tb=document.querySelector("tbody")
    var qx=document.querySelector(".qx")

    function set(arr){
        localStorage.setItem('sj',JSON.stringify(arr))
    }
    function get(){
        var data=localStorage.getItem('sj')
        if(data!=null){
            return JSON.parse(data)
        }else{
            return []
        }
    }
    function tj(){
        yhm.value='用户名'
        nl.value='年龄'
        mtk.style.display='block'
    }
    function add(){
        var data=get()
        data.push({
            yhm:yhm.value,
            nl:nl.value
        });
        set(data)
        xr()
    }
    function xr(){
        tb.innerHTML=''
        var data=get()
        for(i=0;i<data.length;i++){
            var tr=document.createElement('tr')
            if(qx.checked){
                tr.innerHTML=`
            <td><input type="checkbox" checked class='fxk'onclick='fx()'></td>
            <td>${data[i].yhm}</td>
            <td>${data[i].nl}</td>
            <td><button onclick='sc(${i})'>删除</button></td>
            `; 
            }else{
            tr.innerHTML=`
            <td><input type="checkbox" class='fxk' onclick='fx()'></td>
            <td>${data[i].yhm}</td>
            <td>${data[i].nl}</td>
            <td><button onclick='sc(${i})'>删除</button></td>
            `;
            }
            tb.appendChild(tr)
            yhm.value=''
            nl.value=''
            mtk.style.display='none'
        }
    }
    xr()
    function f1(){
        yhm.value=''
    }
    function f2(){
        nl.value=''
    }
    function sc(ii){
        var data=get()
        data.splice(ii,1)
        set(data)
        xr()
    }
    function qxx(){
        var fxk=document.querySelectorAll('.fxk')
        for(i=0;i<fxk.length;i++){
            fxk[i].checked=qx.checked
        }
    }
    function fx(){
        var fxk=document.querySelectorAll(".fxk")
        for(i=0;i<fxk.length;i++){
            
                var a=document.querySelectorAll('.fxk:checked')
                if(a.length==fxk.length){
                    qx.checked=true
                }else{
                    qx.checked=false
                }
            
        }
    }
</script>